﻿@page "/components/tabs"
@page "/components/MudDynamicTabs"
@page "/components/MudTabPanel"
@page "/components/MudTabs"

<DocsPage>
    <DocsPageHeader Title="Tabs" />
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Simple Tab">
                <Description></Description>
            </SectionHeader>
            <SectionContent Code="@nameof(TabsSimpleExample)" ShowCode="false"  Block="true">
                <TabsSimpleExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Centered">
                <Description>Use the <CodeInline>Centered</CodeInline> prop to keep your tabs in the middle.</Description>
            </SectionHeader>
            <SectionContent Code="@nameof(TabsCenteredExample)" ShowCode="false"  Block="true">
                <TabsCenteredExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Scrolling Tabs">
                <Description>If the total size of all tabs exceeds the total size of the tabs container, buttons will be added for scrolling.<br />With the <CodeInline>AlwaysShowScrollButtons</CodeInline> prop, you can display the scroll buttons at all time.</Description>
            </SectionHeader>
            <SectionContent Code="@nameof(TabsScrollExample)" ShowCode="false" Block="true" FullWidth="true">
                <TabsScrollExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Custom Scroll Icons">
                <Description>The icons can be changed with the <CodeInline>PrevIcon</CodeInline> and <CodeInline>NextIcon</CodeInline> properties.</Description>
            </SectionHeader>
            <SectionContent Code="@nameof(TabsCustomScrollIconsExample)" ShowCode="false" Block="true" FullWidth="true">
                <TabsCustomScrollIconsExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Tabs Position">
                <Description>The position of the tab bar can be changed with the <CodeInline>Position</CodeInline> property.</Description>
            </SectionHeader>
            <SectionContent Code="@nameof(TabsPositionExample)" ShowCode="false" Block="true" FullWidth="true">
                <TabsPositionExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Icon Tabs">
                <Description>Icons can be used in addition to regular text in the tabs.</Description>
            </SectionHeader>
            <SectionContent Code="@nameof(TabsIconAndTextExample)" ShowCode="false">
                <TabsIconAndTextExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Minimum Tab Width">
                <Description>The minimum tab width can be set by specifying a css width against the <CodeInline>MinimumTabWidth</CodeInline> property.</Description>
            </SectionHeader>
            <SectionContent Code="@nameof(TabsMinimumTabWidthExample)" ShowCode="false">
                <TabsMinimumTabWidthExample/>
            </SectionContent>
        </DocsPageSection>


        <DocsPageSection>
            <SectionHeader Title="Badges">
                <Description>Badges can be be applied to both icons and texts in the same way.</Description>
            </SectionHeader>
            <SectionContent Code="@nameof(TabsWithBagdesExample)" ShowCode="false">
                <TabsWithBagdesExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Tooltip Tabs">
            </SectionHeader>
            <SectionContent Code="@nameof(TabsToolTipExample)">
                <TabsToolTipExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Customization">
                <Description>Custom tab header content can be provided for special scenarios. Specify only <CodeInline>TabContent</CodeInline> to customize the tab content, or specify <CodeInline>TabWrapperContent</CodeInline> to provide a wrapper around the entire tab header. The header of the active tab can be customized using <CodeInline>ActiveTabClass</CodeInline>.</Description>
            </SectionHeader>
            <SectionContent Code="@nameof(TabsContentExample)" ShowCode="false" HighLight="TabContent,TabWrapperContent">
                <TabsContentExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Set Active Panel">
            </SectionHeader>
            <SectionContent Code="@nameof(TabsSetActiveExample)" ShowCode="false"  Block="true">
                <TabsSetActiveExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Binding Selected Panel">
            </SectionHeader>
            <SectionContent Code="@nameof(TabsBindingExample)" ShowCode="false"  Block="true">
                <TabsBindingExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Simple Dynamic Tabs">
                <Description>
                    A browser like tab experience, where users can add new tabs and close existing ones. Add and Close needs to be provided as callbacks.
                    <br /> To hide the close icon, set <CodeInline>ShowCloseIcon = false</CodeInline>
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(DynamicTabsSimpleExample)" ShowCode="false"  Block="true">
                <DynamicTabsSimpleExample />
            </SectionContent>
        </DocsPageSection>

		 <DocsPageSection>
            <SectionHeader Title="Advanced Dynamic Tabs">
                <Description>
					<MudText Typo="Typo.body2">
						Although MudDynamicTabs allows a basic browser like tab experience, the way the style can be influenced is limited 
					</MudText>
					<MudText Typo="Typo.body2">
						 The Property Header and TabPanelHeader allows you to add any RenderFragment to the tab (Header) 
						 and to each tab panel (TabPanelHeader). The placement can be influenced by setting values to HeaderPosition or TabPanelHeaderPosition
					</MudText>
				</Description>
            </SectionHeader>
            <SectionContent Code="@nameof(CustomDynamicTabsExample)" ShowCode="false"  Block="true">
                <CustomDynamicTabsExample />
            </SectionContent>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>
